<template>
    <div class="energize">
        <div class="cq-energize w1160">
            <CqTitle :ImgUrl="url" title="用科技为企业赋能" :ImgWidth="width" :ImgHeight="height"></CqTitle>
            <ul class="industry-list flex fz18 text-center">
                <li>金融行业</li>
                <li>互联网行业</li>
                <li>保险行业</li>
                <li>汽车行业</li>
                <li>传媒行业</li>
                <li>通信行业</li>
            </ul>
            <div class="cq-swiper-content fz14">
                <el-carousel :interval="4000" type="card" height="452px" arrow="never">
                    <el-carousel-item v-for="item in BottomBannerList" :key="item.id">
                        <div class="content flex fd_c">
                            <img :src="$get(item.ImgUrl)" width=218 height=55 :alt="item.ImgUrl">
                            <p>作为中国的银行卡联合组织，中国银联处于我国银行卡产业的核心和枢纽地位，对我国银行卡产业发展发挥着基础性作用，各银行通过银联跨行交易清算系统。实现了系统间的互联互通，进而使银行卡得以跨银行、跨地区和跨境使用{{ item.id }}</p>
                        </div>
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>
    </div>
</template>

<script>
import CqTitle from './cq-title.vue'
export default {
  name: 'CqEnergize',
  components: {
    CqTitle
  },
  data () {
    return {
      url: 'logo-title2',
      width: 302,
      height: 79,
      BottomBannerList: [
        { id: 1, title: '中国联通', ImgUrl: 'B-CUCC' },
        { id: 2, title: '中国银联', ImgUrl: 'B-CUP' },
        { id: 3, title: '腾讯', ImgUrl: 'B-Tencent' }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>

.energize {
    background-color: #f8fafd;
}

.cq-energize {
    padding-top: 82px;
}

.industry-list {
    justify-content: space-between;
    cursor: pointer;
    padding: 69px 0;
    li {
        width: 181px;
        height: 50px;
        line-height: 50px;
        border-radius: 40px;
        box-shadow: 0px -1px 21px 0px rgba(192, 192, 192, 0.35);
        &:hover {
            color: #fff;
            background-color: #ff7200;
        }
    }
}

.cq-swiper-content {
    height: 452px;
    margin-left: 37px;
    padding-top: 50px;
    padding-bottom: 112px;
    .content {
        box-sizing: border-box;
        align-items: center;
        width: 500px;
        padding: 90px 25px;
        background-color: white;
        box-shadow: 0px -1px 21px 0px rgba(114, 113, 113, 0.3);
        p {
            text-indent: 2em;
            padding: 50px 5px;
        }
    }
}
</style>
